<template>
  <div>
    <div class="fullscreenModalBox" v-show="showModal">
      <div class="van-header">
        <van-icon name="arrow-left" size="16" @click="$emit('handleClose')" />
        <div class="left">{{ listData.orderStatusLabel }}</div>
      </div>

      <div class="content">
        <div class="waitBox" v-if="listData.orderStatus == 1">
          <p>
            需付款：¥{{ listData.orderAmount }}&nbsp;&nbsp;&nbsp;
            <span v-if="listData.payMethod == 1"> 剩余：{{ dayTime }} </span>
            <span v-if="listData.payMethod == 2"> 剩余：{{ minuteTime }} </span>
          </p>
          <van-button
            class="waitBtn"
            round
            type="danger"
            @click="handlePayment"
            v-if="listData.payMethod == 2"
            >立即支付</van-button
          >
          <van-button
            v-if="listData.payMethod == 1"
            class="waitBtn"
            round
            type="default"
            disabled
            >线下支付</van-button
          >
          <van-button v-if="isShow" class="waitBtn disabled" round disabled
            >支付超时</van-button
          >
        </div>

        <div
          v-if="timeLimit"
          style="height: 50px; line-height: 45px; text-align: center"
        >
          <p>{{ timeLimit }}</p>
        </div>

        <div class="item" v-if="!initData">
          <div class="txtHand">
            <van-icon name="location-o" style="color: #000" />
            {{ listData.receiver
            }}<span style="margin-left: 14px">{{
              listData.receiverContact
            }}</span>
            <!-- <a
              v-if="initData.orderStatus == 1 && minuteOut !== null"
              class="btnEdit"
              @click="showEdit = true"
              >修改</a
            > -->
          </div>
          <p class="addrs">
            地址：{{
              listData.provName +
              listData.cityName +
              listData.countyName +
              listData.detailAddr
            }}
          </p>
        </div>

        <div class="item" v-if="initData">
          <div class="txtHand">
            <van-icon name="location-o" style="color: #000" />
            {{ initData.receiver
            }}<span style="margin-left: 14px">{{
              initData.receiverContact
            }}</span>
            <a
              v-if="initData.orderStatus == 1 && minuteOut !== null"
              class="btnEdit"
              @click="showEdit = true"
              >修改</a
            >
          </div>
          <p class="addrs">
            地址：{{
              initData.provName +
              initData.cityName +
              initData.countyName +
              initData.detailAddr
            }}
          </p>
        </div>

        <div class="item" style="margin-top: 14px">
          <div class="title">
            <van-icon
              name="shop-o"
              style="font-size: 16px; margin-right: 4px"
            />
            <span>{{ listData.networkName }}</span>
          </div>
          <div
            class="cardBox"
            v-for="(item, i) in listData.orderGoodsVOS"
            :key="i"
          >
            <div style="display: flex">
              <a class="left">
                <img
                  :src="
                    fileUrlObj[item.goodsMainFileCode] ||
                    (loading ? 'loading.gif' : 'noImgData.png')
                  "
                />
              </a>
              <div class="right">
                <div class="righTxt">
                  <p class="handTxt">{{ item.goodsName }}</p>
                  <p class="specs">{{ item.attrNames }}</p>
                  <p class="specs" v-if="item.presaleDeliveryTime">
                    预售发货时间:{{ item.presaleDeliveryTime }}
                  </p>
                </div>
                <div style="text-align: right; flex: none">
                  <p style="margin-top: 2px">¥{{ item.sellingPrice }}</p>
                  <p class="specs">x{{ item.buyCount }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="item bigTxt"
          style="margin-top: 14px"
          v-show="
            listData.orderStatus == 4 && listData.afterSalesStatus !== '1'
          "
        >
          <p>
            售后状态：<span>{{ listData.afterSalesStatusLabel }}</span>
          </p>
          <p>
            退款金额：<span
              >¥{{ refundAmount == null ? 0 : refundAmount }}</span
            >
          </p>
        </div>

        <div class="item bigTxt" style="margin-top: 14px">
          <p>
            订单编号：<span>{{ listData.orderNo }}</span>
          </p>
          <p>
            下单时间：<span>{{ listData.createTime }}</span>
          </p>
          <p>
            支付方式：<span>{{ listData.payMethodLabel }}</span>
          </p>
          <p
            v-if="
              listData.orderStatus == 1 ||
              listData.orderStatus == 2 ||
              listData.orderStatus == 3
            "
          >
            配送方式：<span>{{ listData.deliveryModeLabel }}</span>
          </p>
          <p v-if="listData.orderStatus != 1">
            支付时间：<span>{{ listData.payTime }}</span>
          </p>
          <p>
            商品总额：<span style="float: right"
              >¥{{ listData.orderAmount - listData.shippingAmount }}</span
            >
          </p>
          <p>
            运费：<span style="float: right"
              >¥{{ listData.shippingAmount }}</span
            >
          </p>
          <p style="text-align: right; color: #000">
            <em style="font-style: normal" v-if="listData.orderStatus == 1"
              >需付款：</em
            >
            <em style="font-style: normal" v-else>实付款：</em>
            <span style="color: #ee3523">¥{{ listData.orderAmount }}</span>
          </p>

          <p v-if="listData.buyerRemark">
            订单备注：<span class="remark">{{ listData.buyerRemark }}</span>
          </p>
        </div>

        <div
          class="item bigTxt"
          style="margin-top: 14px"
          v-show="listData.orderStatus == 3"
        >
          <p style="color: #000; font-weight: bold">配送信息</p>
          <p v-if="listData.orderStatus == 4">
            收货时间：<span>{{ listData.confirmReceivingTime }}</span>
          </p>
          <div v-for="item in delivery" :key="item.deliveryId">
            <p>
              发货时间：<span>{{ listData.deliveryTime }}</span>
            </p>
            <p>
              快递信息：<span>
                {{ item.expressNumber }} {{ item.expressLabel }}</span
              >
            </p>
          </div>
        </div>
        <div
          class="item bigTxt"
          style="margin-top: 14px"
          v-if="listData.orderStatus == 5 && listData.cancelReason"
        >
          <p style="color: #000; font-weight: bold">订单取消原因</p>
          <p>
            取消原因：<span>{{ listData.cancelReason }}</span>
          </p>
        </div>
      </div>
      <div class="bottomTip">
        <div class="btnBox">
          <van-button
            plain
            hairline
            class="success"
            v-if="listData.orderStatus == 1"
            round
            type="success"
            >取消订单</van-button
          >
          <van-button
            round
            plain
            hairline
            type="success"
            class="success"
            v-if="listData.orderStatus == 5"
            @click="handleDelete"
            >删除订单</van-button
          >
          <van-button
            plain
            hairline
            class="success"
            round
            type="success"
            @click="handleDetail"
            v-if="listData.orderStatus != 1"
            >查看物流</van-button
          >
          <van-button
            plain
            hairline
            class="success"
            round
            type="success"
            @click="refundDeail(1)"
            v-if="listData.refundId"
            >查看退款</van-button
          >

          <van-button
            round
            type="danger"
            class="success"
            v-if="
              listData.orderStatus == 1 &&
              listData.payMethod == 2 &&
              minuteOut !== null
            "
            @click="handlePayment"
            >立即支付</van-button
          >
          <van-button
            round
            type="danger"
            class="success"
            v-if="listData.orderStatus == 3"
            @click="handleReceipt"
            >确认收货</van-button
          >
        </div>
      </div>
    </div>
    <full-loading v-if="loading"></full-loading>
    <!-- 新增/详情/编辑 弹出框 -->
    <orderDetail ref="orderDetailRef"></orderDetail>

    <fullscreenModal
      :modal="fullscreenModal"
      label="退款"
      :editType="'detail'"
      :isShowEdit="false"
      :showSave="false"
      @handleClose="fullscreenModal = false"
    >
      <detail ref="detailRef"></detail>

      <div class="btnBox" v-if="listData.afterSalesStatus != 3">
        <van-button type="info" round block @click="onDelete"
          >取消退款</van-button
        >
      </div>
    </fullscreenModal>
    <!-- 支付弹出层 -->
    <confirmOrder ref="payment" @paySuccess="paySuccess" :money="payMoney" />
    <van-popup
      v-model="showEdit"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <div class="van-header">
        <div class="left">
          <!-- 新增返回列表页 -->
          <van-icon name="arrow-left" size="16" @click="showEdit = false" />
        </div>
        <div class="middle">
          <span class="label">配送至</span>
        </div>
      </div>
      <div class="content">
        <div>
          <p class="txtPs">当前配送至</p>
          <van-cell icon="location-o" :value="listData.receiverAddr" />
          <p class="txtPs">从我的收货地址选择</p>
        </div>
        <div>
          <div
            class="indexBox"
            v-for="item in showList"
            :key="item.addrId"
            @click="handleAddr(item)"
          >
            <div style="display: flex">
              <span>{{ item.name }}</span>
              <span style="text-align: right; flex: 1">{{ item.tel }}</span>
            </div>
            <div style="padding: 8px 0">
              {{ item.address }}
            </div>
          </div>
          <!-- 无数据 -->
          <van-empty
            v-if="isEmpty"
            class="custom-image"
            :image="require('@/assets/images/empty.png')"
            description="暂无收获地址"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { queryFileList } from "@/api/common";
import orderDetail from "./logistics";
import confirmOrder from "@/components/confirmOrder";
import { queryPersonPayment } from "@/api/platframe/mainFrame/pay";
import {
  getOrder,
  payOrder,
  takeOrder,
  takeOrderDetall,
  queryFreight,
  queryDelivery,
  delOrder,
  refundCancel,
} from "@/api/srvAssurance/shoppingMall/order";
import { getQuery } from "@api/platframe/mainFrame/address";

export default {
  components: { orderDetail, confirmOrder },

  props: {
    // 是否展示该弹框
    showModal: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      isEmpty: false,
      listData: [],
      showList: [],
      fileUrlObj: {},
      initData: "",
      dayTime: "",
      minuteTime: "",
      timeLimit: "",
      timeOut: null,
      minuteOut: null,
      minutOut: null,
      fullscreenModal: false,
      showEdit: false,
      isShow: false,
      carriage: 0,
      shippingAmount: 0,
      refundAmount: 0,
      countyCode: "",
      payMoney: "",
      delivery: [],
    };
  },
  computed: {
    userInfo() {
      return (
        this.$store.state.userInfo || {
          userId: "66F76BDF118A41708E721AA12B0D80E0",
        }
      );
    },
  },
  mounted() {
    // this.getQuery();
  },
  methods: {
    handleOpen(item) {
      clearInterval(this.timeOut);
      clearInterval(this.minuteOut);
      clearInterval(this.minutOut);
      this.timeOut = null;
      this.minuteOut = null;
      this.dayTime = "";
      this.minuteTime = "";
      this.timeLimit = "";

      this.loading = true;
      getOrder(item).then((res) => {
        if (res.code === 1000 && res.data) {
          this.shippingAmount = res.data.shippingAmount;
          if (res.data.orderStatus == "3") {
            this.getDelivery(item);
          }

          if (res.data.payMethod == 2) {
            // 执行倒计时
            this.minuteOut = setInterval(() => {
              this.getWeekMoth(res.data.onlinePayTimeLimit);
            }, 1000);
          } else {
            this.timeOut = setInterval(() => {
              this.getWeekday(res.data.offlinePayTimeLimit);
            }, 1000);
          }

          if (
            res.data.confirmReceivingTimeLimit &&
            res.data.orderStatus == "3"
          ) {
            this.minutOut = setInterval(() => {
              this.getTimeOut(res.data.confirmReceivingTimeLimit, item);
            }, 1000);
          }

          this.listData = res.data;
          this.refundDeail(0);
          let filecodeArr = [];
          res.data.orderGoodsVOS.forEach((val, i) => {
            if (
              val.goodsMainFileCode &&
              !this.fileUrlObj[val.goodsMainFileCode]
            ) {
              filecodeArr.push(val.goodsMainFileCode);
              this.fileUrlObj[val.goodsMainFileCode] = "";
            }
          });
          if (filecodeArr.length) {
            this.queryFileInfoData(filecodeArr);
          }
        }
      });
    },
    getDelivery(data) {
      queryDelivery(data).then((res) => {
        if (res.code === 1000 && res.data) {
          this.delivery = res.data;
        }
      });
    },
    async refundDeail(val) {
      let item = "";
      let res = await takeOrderDetall(this.listData.orderNo);
      if (res.code == "1000" && res.data) {
        item = res.data;
      }
      let detailInfo = [];
      this.refundAmount = item.refundAmount;

      if (val == 0) return;
      this.loading = true;
      this.fullscreenModal = true;
      if (item.handleResult) {
        detailInfo = [
          {
            title: "退款金额(元)",
            prop: "refundAmount",
            value: item.refundAmount,
            class: "col_1",
          },
          {
            title: "备注",
            prop: "remark",
            value: item.remark,
            class: "col_1",
          },
          {
            title: "处理结果",
            prop: "handleResultLabel",
            value: item.handleResultLabel,
            class: "col_1",
          },
          {
            title: "处理时间",
            prop: "handleTime",
            value: item.handleTime,
            class: "col_1",
          },
          {
            title: "处理人",
            prop: "handlerName",
            value: item.handlerName,
            class: "col_1",
          },
          {
            title: "处理说明",
            prop: "handleExplain",
            value: item.handleExplain,
            class: "col_1",
          },
        ];
      } else {
        detailInfo = [
          {
            title: "退款金额(元)",
            prop: "refundAmount",
            value: item.refundAmount,
            class: "col_1",
          },
          {
            title: "备注",
            prop: "remark",
            value: item.remark,
            class: "col_1",
          },
          {
            title: "处理结果",
            prop: "handleResultLabel",
            value: item.handleResultLabel,
            class: "col_1",
          },
        ];
      }
      this.$refs.detailRef.getData(detailInfo, item);
      let arr = [];
      if (item.fileCodes) {
        queryFileList(item.fileCodes).then((res) => {
          if (res.code === 1000 && res.data) {
            arr.unshift({
              title: "附件",
              value: [...res.data],
            });
          }
        });
      } else {
        arr.push({ title: "附件", value: [] });
      }
      this.$refs.detailRef.getFileData(arr);
      setTimeout((_) => {
        this.loading = false;
      }, 500);
    },
    onDelete() {
      this.$Dialog
        .confirm({
          title: "是否取消退款？",
        })
        .then(() => {
          this.loading = true;
          refundCancel(this.listData.orderNo)
            .then((res) => {
              this.loading = false;
              if (res.code === 1000) {
                this.fullscreenModal = false;
                this.$Notify({ type: "success", message: "取消成功！" });
                this.$emit("handleClose");
                this.$emit("refresh");
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    // 获取地址数据
    async getQuery() {
      // this.show = true;
      this.showList = [];
      let obj = { staffId: this.userInfo.userId };

      let res = await getQuery(obj);
      if (res && res.code === 1000) {
        // 处理显示数据
        this.resData = res.data;
        if (res.data.length > 0) {
          this.isEmpty = false;
          let arr = [];
          res.data.map((item) => {
            let address =
              item.provName + item.cityName + item.countyName + item.detailAddr;
            arr.push({
              id: item.addrId,
              name: item.receiver,
              tel: item.receiverContact,
              address: address,
              isDefault: item.isDefault,
              ...item,
            });

            if (item.isDefault == "1") {
              this.address = address;
            }
          });
          this.showList = arr;
        } else {
          this.showList = [];
          this.isEmpty = true;
        }
      }
    },
    handleDetail() {
      this.$refs.orderDetailRef.initData(this.listData);
    },
    handleAddr(item) {
      this.initData = item;
      this.countyCode = item.countyCode;
      this.onBtnHangup();
      this.showEdit = false;
    },
    // 计算运费
    onBtnHangup() {
      let data = {
        areaCode: this.countyCode,
        goodsShippingCalcs: [],
      };

      this.listData.orderGoodsVOS.forEach((val) => {
        data.goodsShippingCalcs.push({
          count: val.buyCount,
          specDetailId: val.specDetailId,
          goodsId: val.goodsId,
        });
      });
      queryFreight(data).then((res) => {
        if (res.code === 1000) {
          this.carriage = res.data;
          if (res.data !== this.shippingAmount) {
            this.$Notify({
              type: "warning",
              message: "运费金额发生改变请重新下单！",
            });
          }
        }
      });
    },
    // 订单支付
    handlePayment() {
      let staffId = sessionStorage.getItem("userid");
      this.loading = true;
      queryPersonPayment({ staffId })
        .then((res) => {
          if (res.code === 1000 && res.data) {
            if (res.data.payment_free === "1") {
              // 免密支付
              this.paySuccess();
            } else {
              // 密码校验
              this.loading = false;
              this.payMoney = this.listData.orderAmount + "";
              this.$refs.payment.showModel = true;
            }
          } else {
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 支付成功
    paySuccess() {
      this.loading = true;
      let data = {
        orderAmount: this.listData.orderAmount,
        orderNo: this.listData.orderNo,
      };
      payOrder(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 1000) {
            this.$Notify({ type: "success", message: "支付成功！" });
            this.$emit("handleClose");
            this.$emit("refresh");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 确认收货
    handleReceipt() {
      this.$Dialog
        .confirm({
          title: "是否确定确认收货？",
        })
        .then(() => {
          this.loading = true;
          takeOrder(this.listData.orderNo)
            .then((res) => {
              this.loading = false;
              if (res.code === 1000) {
                this.$Notify({ type: "success", message: "确认收货成功！" });
                this.$emit("handleClose");
                this.$emit("refresh");
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    // 获取图片信息
    queryFileInfoData(filecodeArr) {
      this.loading = true;
      queryFileList(filecodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.previewUrl;
              setTimeout(() => {
                this.fileUrlObj[item.fileCode] = item.url;
              }, 600);
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 删除订单
    handleDelete() {
      this.$Dialog
        .confirm({
          title: "是否确定删除该订单？",
        })
        .then(() => {
          this.loading = true;
          delOrder(this.listData.orderNo)
            .then((res) => {
              this.loading = false;
              if (res.code === 1000) {
                this.$Notify({ type: "success", message: "删除成功！" });
                this.$emit("handleClose");
                this.$emit("refresh");
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    getWeekMoth(dataMinute) {
      var nowTime = new Date().format("yyyy/MM/dd hh:mm:ss");
      var endTime = new Date(dataMinute).format("yyyy/MM/dd hh:mm:ss");
      var t = Date.parse(endTime) - Date.parse(nowTime);
      var i = Math.floor((t / 1000 / 60) % 60);
      var s = Math.floor((t / 1000) % 60);

      if (t <= 0) {
        clearInterval(this.minuteOut);
        this.minuteOut = null;
        this.minuteTime = "";
        this.isShow = true;
      } else {
        this.minuteTime = i + " 分钟 " + s + " 秒";
      }
      this.loading = false;
    },
    getWeekday(time) {
      var nowTime = new Date().format("yyyy/MM/dd hh:mm:ss");
      var endTime = new Date(time).format("yyyy/MM/dd hh:mm:ss");
      var t = Date.parse(endTime) - Date.parse(nowTime);

      var d = Math.floor(t / 1000 / 60 / 60 / 24);
      var h = Math.floor((t / 1000 / 60 / 60) % 24);
      var i = Math.floor((t / 1000 / 60) % 60);
      var s = Math.floor((t / 1000) % 60);

      if (t <= 0) {
        clearInterval(this.timeOut);
        this.timeOut = null;
        this.dayTime = "";
      } else {
        this.dayTime = d + " 天 " + h + " 时 " + i + " 分 " + s + " 秒";
      }
      this.loading = false;
    },

    getTimeOut(dataTime, data) {
      var nowTime = new Date().format("yyyy/MM/dd hh:mm:ss");
      var t = Date.parse(dataTime) - Date.parse(nowTime);
      var d = Math.floor(t / 1000 / 60 / 60 / 24);
      var h = Math.floor((t / 1000 / 60 / 60) % 24);
      var i = Math.floor((t / 1000 / 60) % 60);
      var s = Math.floor((t / 1000) % 60);

      let day = d == 0 ? "" : d + "天";
      let hour = h == 0 ? "" : h + "时";
      let minute = i == 0 ? "" : i + "分";
      let seconds = s == 0 ? "" : s + "秒";

      if (t <= 0) {
        clearInterval(this.minutOut);
        this.minutOut = null;
        this.timeLimit = "";
        takeOrder(data).then((res) => {
          if (res.code === 1000) {
            this.handleOpen(data);
          }
        });
      } else {
        this.timeLimit = "自动收货时间" + day + hour + minute + seconds;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fullscreenModalBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background: #ededed;
  height: 100%;
}

.van-header {
  height: 46px;
  padding: 0 15px;

  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  background: #f9f9f9;
  line-height: 1;
  .left {
    // margin-left: 15px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-left: 8px;
  }
}
.waitBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90px;
  .waitBtn {
    width: 100px;
    height: 30px;
    font-size: 12px;
    margin-top: 14px;
  }
}

.fullscreenModalBox .content {
  padding: 8px;
  height: calc(100% - 90px);
  box-sizing: border-box;
  overflow: auto;
}
.bottomTip {
  height: 44px;
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  padding-right: 10px;
  background: #f9f9f9;
  button {
    width: 85px;
    height: 30px;
    font-size: 12px;
  }
  .btnBox {
    margin-left: auto;
    margin-right: 0px;
  }
  .success {
    margin-left: 10px;
  }
}
.item {
  background: #fff;
  padding: 10px;
  //   margin-top: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  .txtHand {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .btnEdit {
    font-weight: normal;
    float: right;
  }
  .addrs {
    color: #7f7f7f;
    width: 100%;
    line-height: 20px;
    margin-bottom: 5px;
    display: -webkit-box;
    display: -moz-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .cardBox {
    padding: 8px;
    font-size: 14px;
    color: #323233;
    box-sizing: border-box;
    background-color: #fafafa;
    margin-top: 8px;
    .left {
      width: 80px;
      height: 70px;
      flex: none;
      margin-right: 8px;
    }
    .right {
      flex: 1;
      display: flex;
      .righTxt {
        flex: 1;
        .handTxt {
          width: 180px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .specs {
        color: #7f7f7f;
        font-size: 12px;
        margin-top: 5px;
      }
    }
  }
}
.bigTxt {
  p {
    color: #7f7f7f;
    padding-top: 10px;
    font-size: 13px;
    span {
      color: #000;
      font-weight: bold;
    }
  }
  .remark {
    padding-top: 6px;
    display: -webkit-box;
    display: -moz-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .over {
    display: flex;

    color: #7f7f7f;
    padding-top: 10px;
    font-size: 13px;
    .righTxt {
      flex: 1;
      color: #000;
      font-weight: bold;
    }
  }
}

.van-popup {
  .van-header {
    height: 46px;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9f9f9;
    line-height: 1;
    .left {
      position: absolute;
      top: 15px;
      left: 15px;
    }
    .middle {
      font-size: 15px;
      flex: 1;
      text-align: center;
    }
  }
  .content {
    height: calc(100% - 46px);
    overflow: auto;
    background-color: #e7e7e7;
  }
}
.active /deep/ .van-cell__left-icon {
  font-size: 20px;
  color: #ccc;
}
.txtPs {
  padding: 10px 10px 10px 15px;
  font-size: 13px;
}
.indexBox {
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  padding: 10px 16px;
  background-color: #fff;
}

.disabled.van-button--default {
  color: #000;
  background-color: #ccc;
  border: 0.02667rem solid #ebedf0;
}
.btnBox {
  padding: 15px 0px;
}
</style>
<style>
.asdwrapper {
  font-size: 12px;
  width: 80px;
  height: 1rem;
}
</style>
